<!-- 人才详情 -->

<template>
    <div class="resume-preview">
        <Header></Header>
        <div v-if="canSee" class="resume-preview-main flex">
            <div class="resume-preview-left" ref="imageWrapper">
                <!---->
                <div class="personal-info">
                    <div class="personal-main flex">
                        <div class="face-box">
                            <img :src="resumeInfos.headImg || (resumeInfos.sex == 1 ? require('@/assets/image/man.jpg') : require('@/assets/image/woman.jpg'))" class="face">
                        </div>
                        <div class="personal-content flex-item">
                            <div class="title">
                                <div class="flex-row-space-between">
                                    <div class="name">
                                        {{ resumeInfos.name }}
                                    </div>
                                    <el-button style="position: absolute;right: 0" type="primary" class="goutong-btn" @click="showChatList" v-if="userType == 'company'">
                                        立即沟通
                                    </el-button>
<!--                                    <a @click="showChatList" v-if="userType == 'company'">立即沟通</a>-->
                                </div>
                            </div>
                            <div class="other-info">
                                <span>
                                    {{ sexObj[resumeInfos.sex] }}
                                </span>
                                <span>
                                    {{ resumeInfos.year | yearFormat }} 岁
                                </span>
                                <span>
                                    {{ resumeInfos.highestEducationDesc }}
                                </span>
                                <span>
                                    {{ resumeInfos.workExperienceDesc }}
                                </span>
                                <span>
                                    {{ maritalStatusObj[resumeInfos.maritalStatus] }}
                                </span>
                                <span>
                                    {{ resumeInfos.major }}
                                </span>
                            </div>
                            <div class="personal-concat">
                                <div class="phone">
                                    <img src="../../assets/me/red-phone.png">
                                    <span>
                                        {{ resumeInfos.phone }}
                                    </span>
                                </div>
                                <div class="email">
                                    <img src="../../assets/me/red-email.png">
                                    <span>
                                        {{ resumeInfos.email }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-line"></div>
                <div class="job-intention">
                    <div class="title">求职意向</div>
                    <div class="job-content">
                        <div class="content-item">
                            期望职位：{{ resumeIntentions.expectPosition }}
                        </div>
                        <div class="content-item">
                            期望行业：{{ resumeIntentions.expectIndustry }}
                        </div>
                        <div class="content-item">
                            期望薪资：{{ resumeIntentions.expectSalary }}
                        </div>
                        <div class="content-item">
                            求职状态：{{ resumeIntentions.currentState == 1 ? "在职，但考虑换个环境" : "已离职" }}
                        </div>
                    </div>
                </div>
                <div class="row-line"></div>
                <div class="self-desc">
                    <div class="title">自我描述</div>
                    <div class="desc-content">
                        {{ resumeSelfDescs.selfDesc }}
                    </div>
                </div>
                <div class="row-line"></div>
                <div class="education">
                    <div class="title">教育经历</div>
                    <ul class="education-content">
                        <li v-for="(item, key) in resumeEducations" :key="key" class="education-item flex">
                            <div class="label">
                                {{ item.startTime }}
                                至
                                {{ item.endTime }}
                            </div>
                            <div class="line">
                                <div class="dian"></div>
                                <div class="line-box"></div>
                            </div>
                            <div class="item-val">
                                {{ item.education }} |
                                {{ item.schoolName }} |
                                {{ item.majorName }}
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="row-line"></div>
                <div class="work-experience">
                    <div class="title">工作经历</div>
                    <ul class="work-content">
                        <li v-for="(item, key) in resumeWorks" :key="key" class="work-item flex">
                            <div class="label">
                                <div class="time">
                                    {{ item.startTime }} 至
                                    {{ item.endTime }}
                                </div>
                                <div class="month-total"></div>
                            </div>
                            <div class="line">
                                <div class="dian"></div>
                                <div class="line-box"></div>
                            </div>
                            <div class="item-val flex-item">
                                <div class="item-title">
                                    {{ item.companyName }}

                                </div>
                                <div class="item-text">工作职责：
                                    {{ item.workDesc }}
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="row-line"></div>
                <div class="work-experience">
                    <div class="title">培训经历</div>
                    <div class="work-content" v-if="resumeTrains.length>0">
                        <div class="work-item flex" v-for="(items,index) in resumeTrains"
                             :key="index">
                            <div class="label">
                                <div class="time">{{parseTime(new Date(items.startTime), '{y}-{m}')}} 至
                                    {{parseTime(new Date(items.endTime), '{y}-{m}')}}
                                </div>
                                <div class="month-total">
                                    {{formatTimeTotal(new Date(items.startTime), new Date(items.endTime))}}
                                </div>
                            </div>
                            <div class="line">
                                <div class="dian"></div>
                                <div class="line-box"></div>
                            </div>
                            <div class="item-val flex-item">
                                <div class="item-title flex">
                                    <div class="flex-item">{{items.trainName}} | {{items.trainClass}}</div>
                                </div>
                                <div class="item-text">{{items.trainContent}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="work-content no-data" v-else>
                        没有
                    </div>
                </div>
                <div class="row-line"></div>
                <div class="certificate">
                    <div class="title">获得证书</div>
                    <div class="certificate-content" v-if="resumeCertificates.length>0">
                        <div class="certificate-item flex" v-for="(items,index) in resumeCertificates" :key="index">
                            <div class="label">{{items.year}}-{{items.month}}</div>
                            <div class="line">
                                <div class="dian"></div>
                                <div class="line-box"></div>
                            </div>
                            <div class="item-val">{{items.certificateName}}</div>
                        </div>
                    </div>
                    <div class="certificate-content no-data" v-else>
                        没有
                    </div>
                </div>
                <div class="row-line"></div>
                <div class="language">
                    <div class="title">语言能力</div>
                    <ul class="language-content">
                        <li v-for="(item, key) in resumeLanguages" :key="key" class="language-item">
                            <div class="language-name">
                                {{ item.language }}
                            </div>
                            <div class="language-level">
                                {{ item.proficiency }}
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="row-line"></div>
                <div class="specialty">
                    <div class="title">特长标签</div>
                    <div class="specialty-content" v-if="resumeSpecialtyTags.length>0">
                        <div class="specialty-item" v-for="(items,index) in resumeSpecialtyTags" :key="index">
                            {{items.specialtyTags}}
                        </div>
                    </div>
                    <div class="specialty-content no-data" v-else>
                        没有
                    </div>
                </div>
                <!---->
                <div class="row-line"></div>
                <div class="opus">
                    <div class="title">照片/作品</div>
                    <div class="opus-content" v-if="resumeProducts.length>0">
                        <div class="opus-line flex">
                            <div class="opus-item" v-for="(items,index) in resumeProducts" :key="index">
                                <div class="opus-img">
                                    <img :src="items.fileId+'?'+new Date().getTime()" class="face" crossOrigin="anonymous">
                                </div>
                                <div class="opus-desc flex">
                                    <div class="opus-name flex-item" style="text-align: center;">{{items.remark}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="opus-content no-data" v-else>
                        没有
                    </div>
                </div>
            </div>
            <div class="resume-preview-right">
                <div class="preview-option">
                    <!-- <div class="qr-code">
                         <vue-qr class="qrcode-img" :text="codeValue" :margin="0" :size="190"
                                 :logoSrc="logoSrc"></vue-qr>
                     </div>-->
                    <div class="edit-btn" @click="toImage"><img src="../../assets/me/edit-white.png">保存简历</div>
                    <div class="option-title">
                        <div class="line"></div>
                        <div class="title-text">操作</div>
                    </div>
                    <div class="print-btn" @click="toImage">打印简历</div>
                </div>
            </div>
        </div>
        <div style="text-align: center;margin-top: 45px;margin-bottom: 45px;font-size: 24px" v-else-if="userType == 'company'">
            未发布有效职位，无法查看个人简历
        </div>
        <div style="text-align: center;margin-top: 45px;margin-bottom: 45px;font-size: 24px" v-else>
            个人用户不可以查看
        </div>
        <Footer></Footer>

        <el-dialog title="选择要沟通的职位" :visible.sync="chatListStatus" class="add-resume" width="600px">
            <el-table
                :data="jobCategoryList"
                style="width: 100%">
                <el-table-column
                    prop="jobTitle"
                    label="职位名称">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <a @click="confirmChat(scope.row)">立即沟通</a>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
            </div>
        </el-dialog>
    </div>
</template>

<script>
import moment from "moment";
import vueQr from 'vue-qr'
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import {editCompanyResumeProcessState} from '@/api/enterprise/work/resume'
import {getResume} from '@/api/me/resume'
import html2canvas from "html2canvas";
import {list} from "@/api/enterprise/work/job";
import {getBasicInfo} from "../../api/enterprise/work/center";
import {usersAnon} from "../../api/base";


export default {
    name: 'TalentDetail',
    data() {
        return {
            logoSrc: '',
            codeValue: '123',
            list: {},
            accountId: 0,
            resumeInfos: {},
            resumeIntentions: {},
            resumeEducations: [],
            resumeWorks: [],
            resumeTrains: [],
            resumeCertificates: [],
            resumeSpecialtyTags: [],
            resumeProducts: [],
            resumeLanguages: [],
            resumeSelfDescs: {},
            sexObj: {1: '男', 2: '女'},
            maritalStatusObj: {1: '已婚', 2: '未婚'},
            imgUrl: '',
            dialogTableVisible: false,
            canSee: false,
            userType: this.$store.getters.userType,
            nickname: this.$store.getters.nickname,
            chatListStatus: false,
            jobCategoryList: [],
            companyInfo: {}

        }
    },
    components: {
        Header,
        Footer,
        vueQr
    },
    filters: {
        yearFormat(val) {
            return new Date().getFullYear() - moment(val).format('Y')
        }
    },
    created() {
        if (!this.nickname) {
            this.routerLink('/MainLogin')
        }
        if (this.$route.query.id) {
            this.changeCompanyResumeProcessState(this.$route.query.id);
            this.getResume();
            if (this.userType == 'company') {
                this.getList();
                this.getBasicInfo();
            }else{
                this.canSee = false;
            }
        }
    },
    methods: {
        getList() {
            list({state: 1, page: 1, limit: 100}).then(res => {
                if (res.data.length) {
                    this.jobCategoryList = res.data
                    this.canSee = true;
                }
            })
        },
        getResume() {
            getResume({id: this.$route.query.id}).then(res => {
                this.accountId = res.datas.accountId
                this.resumeInfos = res.datas.resumeInfos[0]
                this.resumeIntentions = res.datas.resumeIntentions[0]
                this.resumeEducations = res.datas.resumeEducations
                this.resumeWorks = res.datas.resumeWorks
                this.resumeTrains = res.datas.resumeTrains
                this.resumeCertificates = res.datas.resumeCertificates
                this.resumeSpecialtyTags = res.datas.resumeSpecialtyTags
                this.resumeProducts = res.datas.resumeProducts
                this.resumeLanguages = res.datas.resumeLanguages
                this.resumeSelfDescs = res.datas.resumeSelfDescs.length ? res.datas.resumeSelfDescs[0] : {}
            })
        },
        getBasicInfo() {
            getBasicInfo().then(res => {
                this.companyInfo = res.datas;
            })
        },
        showChatList() {
            this.chatListStatus = true;
        },
        confirmChat(record) {
            // usersAnon(this.accountId);
            // return false;
            this.$router.push(`/enterprise/work/chat-detail?accountId=${this.accountId}&accountName=${this.resumeInfos.name}&resumeId=${this.resumeInfos.resumeId}&resumeName=${this.resumeInfos.name}&companyId=${this.companyInfo.accountId}&companyName=${this.companyInfo.companyName}&positionId=${record.id}&positionName=${record.jobTitle}`);
        },
        changeCompanyResumeProcessState(id) {
            editCompanyResumeProcessState(id)
        },
        toImage() {
            html2canvas(this.$refs.imageWrapper, {
                allowTaint: true,
                useCORS: true
            }).then(canvas => {
                let dataURL = canvas.toDataURL("image/png");
                this.imgUrl = dataURL;
                if (this.imgUrl !== "") {
                    this.dialogTableVisible = true;
                }
                let a = document.createElement("a");
                a.href = dataURL;
                a.setAttribute("download", this.resumeInfos.name + '的简历');
                a.click();
            });
        }
    }
}
</script>

<style lang="scss" scoped="scoped">
@import url('../../assets/styles/enterprise/common.css');
.resume-preview {
    width: 100%;

    .resume-preview-main {
        width: 1200px;
        padding: 35px 0;
        margin-left: auto;
        margin-right: auto;
        min-height: 700px;

        .goutong-btn {
            background: #3EACC4;
            border-color: #3EACC4;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
        }

        .resume-preview-left {
            width: 880px;
            background-color: #fff;
            padding: 30px 30px;
            box-sizing: border-box;

            .row-line {
                width: 100%;
                border-bottom: 1px dashed #E0E0E0;
            }

            /***** ***/
            .personal-info {
                width: 100%;
                position: relative;

                .personal-main {
                    padding-bottom: 30px;

                    .face-box {
                        width: 100px;
                        height: 100px;
                        position: relative;
                        cursor: pointer;

                        .face {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }

                        .face-text {
                            text-align: center;
                            color: #fff;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: 21px;
                            line-height: 21px;
                            font-size: 12px;
                            background-color: rgba(0, 0, 0, 0.3);
                        }
                    }

                    .personal-content {
                        margin-left: 23px;
                        color: #787878;

                        .title {
                            overflow: hidden;
                            height: 28px;
                            line-height: 28px;
                            color: #121212;
                            font-weight: 400;

                            .name {
                                font-size: 26px;
                                float: left;
                            }

                            .phone {
                                float: left;
                                margin-left: 25px;

                                img {
                                    vertical-align: middle;
                                    margin-top: -3px;
                                }
                            }

                            .email {
                                float: left;
                                margin-left: 50px;

                                img {
                                    vertical-align: middle;
                                    margin-top: -2px;
                                    margin-right: 3px;
                                }
                            }
                        }

                        .other-info {
                            color: #787878;
                            overflow: hidden;

                            span {
                                display: block;
                                float: left;
                                padding: 0 10px;
                                border-right: 1px solid #ccc;
                            }

                            span:last-child {
                                border-right: 0;
                            }

                            span:first-child {
                                padding-left: 0;
                            }

                            margin-top: 15px;
                        }

                        .personal-concat {
                            overflow: hidden;
                            height: 28px;
                            line-height: 28px;
                            color: #CE3A5C;
                            font-weight: 400;
                            margin-top: 15px;

                            .phone {
                                float: left;
                                margin-left: -3px;

                                img {
                                    vertical-align: middle;
                                    margin-top: -3px;
                                }
                            }

                            .email {
                                float: left;
                                margin-left: 50px;

                                img {
                                    vertical-align: middle;
                                    margin-top: -2px;
                                    margin-right: 3px;
                                }
                            }
                        }
                    }
                }
            }

            /***** ***/
            .job-intention {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .job-content {
                    overflow: hidden;
                    margin-top: 20px;
                    color: #787878;

                    .content-item {
                        line-height: 30px;
                        padding-right: 10px;
                    }
                }
            }

            /***** ***/
            .self-desc {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .desc-content {
                    margin-top: 20px;
                    color: #787878;
                    line-height: 30px;
                }
            }

            /***** ***/
            .education {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .education-content {
                    margin-top: 20px;
                    color: #787878;

                    .education-item {
                        min-height: 30px;
                        line-height: 30px;

                        .label {
                            padding-right: 20px;
                            width: 156px;
                            text-align: right;
                        }

                        .line {
                            width: 7px;
                            position: relative;

                            .dian {
                                width: 7px;
                                height: 7px;
                                background: #D0D0D0;
                                border-radius: 50%;
                                position: absolute;
                                top: 11px;
                                left: 0;
                            }

                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 100%;
                                width: 1px;
                                margin-left: 3px;
                            }
                        }

                        .item-val {
                            padding-left: 20px;
                        }
                    }

                    .education-item:first-child {
                        .line {
                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 50%;
                                width: 1px;
                                margin-left: 3px;
                                position: absolute;
                                top: 50%;
                            }
                        }
                    }

                    .education-item:last-child {
                        .line {
                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 50%;
                                width: 1px;
                                margin-left: 3px;
                            }
                        }
                    }
                }
            }

            /***** ***/
            .work-experience {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .work-content {
                    margin-top: 20px;
                    color: #787878;

                    .work-item {
                        min-height: 30px;
                        line-height: 30px;

                        .label {
                            padding-right: 20px;
                            text-align: right;
                            width: 156px;

                            .month-total {
                                font-size: 12px;
                                color: #BCBCBC;
                            }
                        }

                        .line {
                            width: 7px;
                            position: relative;

                            .dian {
                                width: 7px;
                                height: 7px;
                                background: #D0D0D0;
                                border-radius: 50%;
                                position: absolute;
                                top: 11px;
                                left: 0;
                            }

                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 100%;
                                width: 1px;
                                margin-left: 3px;
                            }
                        }

                        .item-val {
                            padding-left: 20px;

                            .item-title {
                                color: #3EABC4;
                                font-weight: bold;
                            }

                            padding-bottom: 40px;
                        }
                    }

                    .work-item:first-child {
                        .line {
                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 100%;
                                width: 1px;
                                margin-left: 3px;
                                margin-top: 15px;
                            }
                        }
                    }

                    .work-item:last-child {
                        .line {
                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 100%;
                                width: 1px;
                                margin-left: 3px;
                            }
                        }

                        .item-val {
                            padding-bottom: 0px;
                        }
                    }
                }
            }

            /***** ***/
            .language {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .language-content {
                    margin-top: 20px;
                    color: #787878;
                    line-height: 30px;
                    overflow: hidden;

                    .language-item {
                        min-width: 66px;
                        border: 1px solid #3EABC4;
                        float: left;
                        margin-right: 20px;
                        border-radius: 2px;

                        .language-name {
                            background-color: #3EABC4;
                            color: #fff;
                            text-align: center;
                            box-sizing: border-box;
                            padding: 0 10px;
                        }

                        .language-level {
                            text-align: center;
                            color: #3EABC4;
                        }
                    }
                }
            }

            /***** ***/
        }

        .resume-preview-right {
            width: 300px;
            margin-left: 20px;

            .preview-option {
                background-color: #fff;
                padding-top: 52px;
                padding-bottom: 200px;

                .qr-code {
                    width: 200px;
                    height: 200px;
                    margin-left: auto;
                    margin-right: auto;
                    border: 1px solid #ccc;

                    img {
                        margin-left: auto;
                        margin-right: auto;
                        margin-top: 5px;
                        display: block !important;
                    }
                }

                .edit-btn {
                    width: 140px;
                    height: 40px;
                    line-height: 40px;
                    background: #3EACC4;
                    border-radius: 4px;
                    text-align: center;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 30px;
                    color: #fff;
                    cursor: pointer;

                    img {
                        margin-right: 5px;
                        vertical-align: middle;
                        margin-top: -2px;
                    }
                }

                .option-title {
                    width: 140px;
                    height: 30px;
                    line-height: 30px;
                    margin-left: auto;
                    margin-right: auto;
                    position: relative;
                    margin-top: 65px;

                    .line {
                        width: 100%;
                        height: 15px;
                        border-bottom: 1px solid #ccc;
                    }

                    .title-text {
                        padding: 0 5px;
                        background-color: #fff;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        color: #9A9A9A;
                        margin-left: -19px;
                    }
                }

                .print-btn {
                    width: 140px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 4px;
                    text-align: center;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 10px;
                    color: #3EACC4;
                    border: 1px solid #3EACC4;
                    cursor: pointer;
                }
            }

        }
    }

    .certificate{
        width: 100%;
        position: relative;
        margin: 30px 0;
        .add-btn{
            color: #3EABC4;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            img{
                vertical-align: middle;
                margin-top: -2px;
                margin-right: 3px;
            }
        }
        .title{
            font-size: 16px;
            font-weight: bold;
            color: #3EABC4;
            border-left:4px solid #3EABC4;
            text-indent: 10px;
        }
        .certificate-content .no-data{
            padding-left: 10px;
            margin-top: 40px;
        }
        .certificate-content{
            margin-top: 25px;
            color: #787878;

            .certificate-item{
                min-height: 30px;
                line-height: 30px;
                .all-option{
                    margin-left: 20px;
                    opacity: 0;
                    pointer-events: none;
                    span{
                        color: #3EABC4;
                        margin-left: 10px;
                        cursor: pointer;
                    }
                }
                .label{
                    padding-right: 20px;
                    width: 156px;
                    text-align: right;
                }
                .line{
                    width: 7px;
                    position: relative;
                    .dian{
                        width: 7px;
                        height: 7px;
                        background: #D0D0D0;
                        border-radius: 50%;
                        position: absolute;
                        top: 11px;
                        left: 0;
                    }
                    .line-box{
                        border-right: 1px solid #D0D0D0;
                        height: 100%;
                        width: 1px;
                        margin-left: 3px;
                    }
                }
                .item-val{
                    padding-left: 20px;
                }
            }
            .certificate-item:hover{
                .all-option{
                    opacity: 1;
                    pointer-events:painted;
                }
            }
            .certificate-item:first-child{
                .line{
                    .line-box{
                        border-right: 1px solid #D0D0D0;
                        height: 50%;
                        width: 1px;
                        margin-left: 3px;
                        position: absolute;
                        top: 50%;
                    }
                }
            }
            .certificate-item:last-child{
                .line{
                    .line-box{
                        border-right: 1px solid #D0D0D0;
                        height: 50%;
                        width: 1px;
                        margin-left: 3px;
                    }
                }
            }
        }
        .certificate-edit{
            .content{
                margin-top: 25px;
                padding-bottom: 20px;
                .edit-left{
                    padding-right: 80px;

                }
                .edit-right{
                    padding-right: 40px;

                }
                .edit-item{

                    .el-form-item{
                        margin-bottom: 20px;
                        .el-form-item__label{
                            font-weight: normal;
                            color: #777777;
                        }
                        .el-input__inner{
                            border-radius: 0px;
                        }
                        .select-input{
                            width: 100%;
                        }
                        .el-input{
                            width: 100%;
                        }

                    }
                    .red-dian{
                        width: 5px;
                        height: 5px;
                        border-radius: 2.5px;
                        background-color: #d92032;
                        margin-right: 5px;
                        margin-top: 16px;
                    }
                    .red-dian.hide{
                        opacity: 0;
                    }
                }
                .form-option{
                    margin-top: 10px;
                    padding-left: 10px;
                    .save{
                        margin-right: 15px;
                    }
                    .tips{
                        font-weight: 400;
                        color: #BBBBBB;
                        line-height: 36px;
                        margin-left: 20px;
                    }

                }
            }
        }
    }
    .specialty{
        width: 100%;
        position: relative;
        margin: 30px 0;
        .add-btn{
            color: #3EABC4;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            img{
                vertical-align: middle;
                margin-top: -2px;
                margin-right: 3px;
            }
        }
        .title{
            font-size: 16px;
            font-weight: bold;
            color: #3EABC4;
            border-left:4px solid #3EABC4;
            text-indent: 10px;
        }
        .specialty-content .no-data{
            padding-left: 10px;
            margin-top: 40px;
        }
        .specialty-content{
            margin-top: 25px;
            color: #787878;
            line-height: 30px;
            overflow: hidden;
            padding-left: 10px;
            .specialty-item{
                padding: 0 20px;
                float: left;
                margin-right: 20px;
                margin-bottom: 20px;
                border: 1px solid #DEDEDE;
                border-radius: 2px;
            }
        }
        .specialty-edit{
            .content{
                margin-top: 25px;
                color: #787878;
                line-height: 30px;
                overflow: hidden;
                padding-left: 10px;
                .specialty-item{
                    padding: 0 20px;
                    float: left;
                    margin-right: 20px;
                    margin-bottom: 20px;
                    border: 1px solid #DEDEDE;
                    border-radius: 2px;
                    cursor: pointer;
                }
                .specialty-item.is-active{
                    border:1px solid #3EABC4;
                    color: #3EABC4;
                }
            }
            .el-form-box{
                width: 390px;
                margin-top: 20px;
                .el-input__inner{
                    border-radius: 0px;
                }
                .el-input{
                    width: 100%;
                }
                .add-specialty{
                    width: 60px;
                    height: 36px;
                    line-height: 36px;
                    cursor: pointer;
                    background: #3DABC4;
                    color: #fff;
                    text-align: center;
                }
            }
            .form-option{
                margin-top: 10px;
                padding-left: 10px;
                .save{
                    margin-right: 15px;
                }
                .tips{
                    font-weight: 400;
                    color: #BBBBBB;
                    line-height: 36px;
                    margin-left: 20px;
                }

            }
        }
    }
    .opus{
        width: 100%;
        position: relative;
        margin: 30px 0;
        .add-btn{
            color: #3EABC4;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            img{
                vertical-align: middle;
                margin-top: -2px;
                margin-right: 3px;
            }
        }
        .title{
            font-size: 16px;
            font-weight: bold;
            color: #3EABC4;
            border-left:4px solid #3EABC4;
            text-indent: 10px;
        }
        .opus-content .no-data{
            padding-left: 10px;
            margin-top: 40px;
        }
        .opus-content{
            margin-top: 25px;
            color: #787878;
            overflow: hidden;
            .opus-line{
                flex-wrap:wrap;
            }
            .opus-item{
                border-radius: 2px;
                width: 260px;
                margin-bottom: 15px;
                margin-right: 40px;
                .opus-img{
                    width: 260px;
                    height: 210px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .opus-desc{
                    margin-top: 15px;
                    .opus-name{
                        padding-right: 10px;
                    }
                    .opus-option{
                        span{
                            cursor: pointer;
                            display: block;
                        }
                        .edit{
                            color: #3EABC4;
                            margin-right: 10px;
                        }
                    }
                }
            }
            .opus-item:nth-child(3n){
                margin-right: 0;
            }
        }
        .opus-edit{
            .content{
                margin-top: 25px;
                padding-bottom: 20px;
                .edit-left{
                    padding-right: 80px;
                    width: 675px;
                    box-sizing: border-box;
                }
                .edit-item{

                    .el-form-item{
                        margin-bottom: 20px;
                        .el-form-item__label{
                            font-weight: normal;
                            color: #777777;
                        }
                        .el-input__inner{
                            border-radius: 0px;
                        }
                        .el-input{
                            width: 100%;
                        }
                        .upload-input{
                            width: 100%;
                            .el-upload{
                                width: 100%;
                            }
                        }
                        .upload-btn{
                            width: 100%;
                            height: 60px;
                            line-height: 60px;
                            background: #EEF5F7;
                            border-radius: 4px;
                            text-align: center;
                            color: #3EABC4;
                            img{
                                vertical-align: middle;
                                margin-top: -3px;
                                margin-right: 5px;
                            }
                        }
                    }
                    .red-dian{
                        width: 5px;
                        height: 5px;
                        border-radius: 2.5px;
                        background-color: #d92032;
                        margin-right: 5px;
                        margin-top: 16px;
                    }
                    .red-dian.hide{
                        opacity: 0;
                    }
                }
                .edit-item.upload-item{
                    .el-form-item__label{
                        font-weight: normal;
                        color: #777777;
                        height: 60px;
                        line-height: 60px;
                    }
                    .red-dian{
                        margin-top: 28px;
                    }
                }
                .form-option{
                    margin-top: 10px;
                    padding-left: 10px;
                    .save{
                        margin-right: 15px;
                    }
                    .tips{
                        font-weight: 400;
                        color: #BBBBBB;
                        line-height: 36px;
                        margin-left: 20px;
                    }

                }
            }
        }
    }
}
</style>
